import React, {forwardRef, useState} from 'react'
import {Form, Input, Select} from "antd";
const {Option} = Select

//forwardRef方法
 const UserForm = forwardRef((props, ref) =>{
     const [isDisabled, setIsDisabled] = useState(false)
    return (
        <Form
            ref={ref}
            // form={form}
            layout="vertical"
            // name="form_in_modal"
            // initialValues={{ modifier: 'public' }}
        >
            <Form.Item
                name="userName"
                label="用户名"
                rules={[{ required: true, message: '请输入用户名' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[{ required: true, message: '请输入用户名' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"
                rules={isDisabled?[]:[{ required: true, message: '请输入区域' }]}
            >
                {/*<Input />*/}
                <Select disabled={isDisabled}>
                    {props.regionList.map(item=>
                        <Option key={item.id} value={item.value} >{item.value}</Option>
                    )}
                </Select>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色"
                rules={[{ required: true, message: '请输入用户名' }]}
            >
                {/*<Input />*/}
                <Select onChange={(value) =>{
                    console.log(value)
                    if (value === '超级管理员'){
                        setIsDisabled(true)
                        ref.current.setFieldsValue({
                            region:""
                        })
                    }else{
                        setIsDisabled(false)
                    }
                }}>
                    {props.roleList.map(item=>
                        <Option key={item.id} value={item.roleName} >{item.roleName}</Option>
                    )}
                </Select>
            </Form.Item>
        </Form>
    )
}
)
export default UserForm